<template>
	<view class="container">
		<view v-show="showPage">
			<view class="topManage">
				<view @tap="clearAll">清空</view>
				<view @tap="isShow==true ? isShow=false:isShow=true;text=='管理'?text='取消':text='管理' ">{{text}}</view>
			</view>
			<view class="product">
				<view class="product-item" v-for="(item,index) in footprintList" :key="index">
					<view >
						<view class="checkbox" v-if="isShow">
							<checkbox-group @change="checkSelectItem($event, item)">
								<label>
									<checkbox :value="item.productSubTitle" :checked="item.checked"
										style="transform:scale(0.7)" color="#cb0d0d" />
								</label>
							</checkbox-group>
						</view>
						<view class="image">
							<image :src="item.productPic" mode=""></image>
						</view>
						<view @tap="gotoProductDeatali(item.productId)">
							<view class="produceTitle">
								{{item.productName}}
							</view>
							<view class="price">
								￥{{item.productPrice}}
							</view>
							<view class="time">
								{{item.createTime | formatCreateTime}}
							</view>
						</view>
						
					</view>
				</view>

			</view>

			<view class="bottomCheck" v-if="isShow">
				<view>
					<checkbox-group @change="checkSelect">
						<label style="display: flex;">
							<checkbox :checked="checkTrue" color="#cb0d0d"></checkbox>
							<text>全选</text>
						</label>
					</checkbox-group>

				</view>
				<view>
					<view class="btn" @tap="delFootprint">删除</view>
				</view>
			</view>
			<!--  -->
			<view v-if="showaddList">
				<uni-load-more iconType="auto" status="loading" v-show="loadshow==false" />
				<view class="load-txt" v-show="loadshow">没有更多数据了</view>
			</view>
		</view>

		<view v-if="showempty">
			<empty text="快去逛逛吧!"></empty>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="提示" content="确定删除吗?"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<SorllTop :value="ShowScroll" :ScrollTopTime="200"></SorllTop>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import SorllTop from '@/components/ScrollTop.vue'
	import {
		formatDate
	} from '@/utils/Time.js'
	export default {
		components: {
			empty,
			SorllTop
		},
		data() {
			return {
				footprintList: [],
				total: 0,
				params: {
					pageNum: 1,
					pageSize: 8
				},
				text: '管理',
				isShow: false, //显示数据
				showPage: false, //进入加载
				showempty: false, //无数据
				loadshow: false, //下拉加载
				checkTrue: false, //全選，
				showaddList: false, //是否显示下来加载
				ShowScroll: false
			}
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 500) {
				this.ShowScroll = true
			} else {
				this.ShowScroll = false
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			setTimeout(() => {
				this.getList()
			}, 800)
		},
		methods: {
			async getList() {
				let res = await this.$api.history.gethistoryList(this.params)
				if (res.code == 200) {
					this.footprintList.push(...res.list)
					this.total = res.total
					uni.hideLoading()
					this.showPage = true
					if (res.list.length == 0) {
						this.showempty = true
						this.showPage = false
					}
					if (res.list.length >= 8) {
						this.showaddList = true
					}
				}
			},
			// 	全选
			checkSelect() {
				if (this.checkTrue == true) {
					this.checkTrue = false;
					// 遍历RecordList数组 取消全选
					this.footprintList.forEach(item => {
						this.$set(item, 'checked', false)
					})
				} else {
					this.checkTrue = true;
					// 遍历RecordList数组 设置全选
					this.footprintList.forEach(item => {
						this.$set(item, 'checked', true)
					})
				}
			},
			checkSelectItem(e, item) {
				// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
				if (item.checked == true) {
					this.$set(item, 'checked', false)
				} else {
					this.$set(item, 'checked', true)
				}
			},
			// 删除
			delFootprint() {
				let ids = []
				this.footprintList.forEach(item => {
					if (item.checked) {
						ids.push(item.id)
					}
				})
				if (ids.length == 0) {
					uni.showToast({
						title: "请勾选",
						icon: 'none'
					})
				} else {
					this.$api.history.deleteHistory(ids).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "删除成功",
								icon: 'success'
							})
							this.footprintList = []
							this.getList()
						} else {
							uni.showToast({
								title: "请联系管理员",
								icon: 'error'
							})
						}
					})
				}
			},
			// 清空
			clearAll() {
				// #ifdef APP-PLUS || H5
				this.$refs.alertDialog.open()
				// #endif

				// #ifdef MP-WEIXIN || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-UNION
				uni.showModal({
					title: "确定清空吗？",
					success: (res) => {
						if (res.confirm) {
							this.$api.history.clearHistory().then(res => {
								if (res.code == 200) {
									this.footprintList = []
									this.getList()
								} else {
									uni.showToast({
										title: "请联系管理员",
										icon: 'error'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				// #endif
			},
			dialogClose() {
				console.log("取消");
			},
			dialogConfirm() {
				this.$api.history.clearHistory().then(res => {
					if (res.code == 200) {
						this.footprintList = []
						this.getList()
					} else {
						uni.showToast({
							title: "请联系管理员",
							icon: 'error'
						})
					}
				})
			},
			gotoProductDeatali(id) {
				uni.navigateTo({
					url: `/pages/view/ProductDetail?Pid=${id}`
				})
			}
		},
		onReachBottom() {
			this.isShow = false
			this.text = "管理"
			if (this.total == this.footprintList.length) {
				this.loadshow = true
			} else {
				setTimeout(() => {
					this.params.pageNum++
					this.getList()
				}, 800)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #e2e1e1;
	}

	.container {
		width: 100%;
		height: 100vh;

		.topManage {
			height: 60rpx;
			width: 100%;
			display: flex;
			border-bottom: 1px solid gainsboro;
			text-align: center;
			line-height: 60rpx;
			background-color: white;
			color: gray;
			position: fixed;
			z-index: 1000;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifdef APP-PLUS || MP-WEIXIN */
			top: 0px;
			/* #endif */

			view:nth-child(2) {
				border-left: 1px solid gainsboro;
			}

			view {
				flex: 1;
			}
		}

		.product {
			width: 100%;
			margin-top: 63rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			// 
			.product-item {
				margin-left: 10rpx;
				width: 360rpx;
				flex-wrap: wrap;
				height: 500rpx;
				background-color: white;
				margin-top: 10rpx;
				position: relative;

				.checkbox {
					top: 10rpx;
					position: absolute;
					z-index: 100;
				}

				.image {
					text-align: center;

					image {
						height: 300rpx;
						width: 300rpx;
					}
				}

				.produceTitle {
					/*1.如果文字显示不开也必须一行内显示*/
					white-space: nowrap;
					/*2.溢出的部分隐藏起来*/
					overflow: hidden;
					/*3.文字溢出的时候用省略号来显示*/
					text-overflow: ellipsis;
				}

				.price {
					color: #e82222;
					padding-top: 10rpx;
					font-size: 40rpx;
				}

				.time {
					color: gray;
					padding-top: 10rpx;
				}
			}

			.product-item:nth-child(even) {
				margin-right: 10rpx;
			}
		}

		.bottomCheck {
			height: 100rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			background-color: white;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			align-items: center;

			view {
				padding: 0 20rpx;

				.btn {
					text-align: center;
					height: 60rpx;
					width: 100rpx;
					line-height: 60rpx;
					background-image: linear-gradient(to right, orangered, #e82222, red);
					color: white;
					border-radius: 30rpx;
					cursor: pointer;
				}
			}
		}

		.load-txt {
			padding: 20rpx 0;
			text-align: center;
			color: #cb0d0d;
			font-size: 24rpx;
		}
	}
</style>
